<template>
  <div class="modern-page error-page">
    <div class="error-content modern-card modern-slide-in">
      <div class="error-icon modern-float">
        <component :is="'SettingsIcon'" />
      </div>
      <div class="error-code modern-text-gradient error-code-maintenance">维护中</div>
      <div class="error-title">系统维护中</div>
      <div class="error-description">
        我们正在对系统进行升级维护，预计{{ estimatedTime }}后恢复正常
      </div>
      <div class="maintenance-info">
        <div class="progress-container">
          <div class="progress-label">维护进度</div>
          <t-progress 
            :percentage="progress" 
            :color="progressColor"
            size="large"
            :label="false"
          />
          <div class="progress-text">{{ progress }}% 完成</div>
        </div>
        <div class="maintenance-details">
          <div class="detail-item">
            <component :is="'ClockIcon'" />
            <span>开始时间: {{ startTime }}</span>
          </div>
          <div class="detail-item">
            <component :is="'CalendarIcon'" />
            <span>预计完成: {{ endTime }}</span>
          </div>
          <div class="detail-item">
            <component :is="'ToolIcon'" />
            <span>维护类型: {{ maintenanceType }}</span>
          </div>
        </div>
      </div>
      <div class="error-actions">
        <t-button 
          theme="primary" 
          size="large"
          class="modern-btn-enhance"
          @click="checkStatus"
          :loading="checking"
        >
          <template #icon>
            <component :is="'RefreshIcon'" />
          </template>
          检查状态
        </t-button>
        <t-button 
          variant="outline" 
          size="large"
          @click="notifyMe"
        >
          <template #icon>
            <component :is="'BellIcon'" />
          </template>
          完成通知
        </t-button>
        <t-button 
          variant="text" 
          size="large"
          @click="viewAnnouncement"
        >
          <template #icon>
            <component :is="'FileTextIcon'" />
          </template>
          查看公告
        </t-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'

const checking = ref(false)
const progress = ref(65)
const startTime = ref('2024-01-15 02:00')
const endTime = ref('2024-01-15 06:00')
const maintenanceType = ref('系统升级')
const currentTime = ref(new Date())

let timer = null

const progressColor = computed(() => {
  if (progress.value < 30) return '#ef4444'
  if (progress.value < 70) return '#f59e0b'
  return '#10b981'
})

const estimatedTime = computed(() => {
  const end = new Date('2024-01-15 06:00')
  const now = currentTime.value
  const diff = end - now
  
  if (diff <= 0) return '即将完成'
  
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  
  if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  }
  return `${minutes}分钟`
})

const checkStatus = async () => {
  checking.value = true
  
  // 模拟检查状态
  setTimeout(() => {
    checking.value = false
    if (progress.value >= 100) {
      MessagePlugin.success('维护已完成，即将重新加载页面')
      setTimeout(() => {
        window.location.reload()
      }, 2000)
    } else {
      MessagePlugin.info('维护仍在进行中，请耐心等待')
    }
  }, 2000)
}

const notifyMe = () => {
  if ('Notification' in window) {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        MessagePlugin.success('将在维护完成后通知您')
      } else {
        MessagePlugin.warning('请允许浏览器通知权限')
      }
    })
  } else {
    MessagePlugin.warning('您的浏览器不支持通知功能')
  }
}

const viewAnnouncement = () => {
  MessagePlugin.info('维护公告功能开发中...')
}

onMounted(() => {
  // 模拟进度更新
  timer = setInterval(() => {
    if (progress.value < 100) {
      progress.value += Math.random() * 2
    }
    currentTime.value = new Date()
  }, 30000) // 每30秒更新一次
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.error-content {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.error-icon {
  font-size: 4rem;
  color: #8b5cf6;
  margin-bottom: 1.5rem;
  animation: rotate 3s linear infinite;
}

.error-code-maintenance {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.error-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

.error-description {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.maintenance-info {
  background: rgba(241, 245, 249, 0.8);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.progress-container {
  margin-bottom: 1.5rem;
}

.progress-label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  text-align: left;
}

.progress-text {
  font-size: 0.9rem;
  color: #6b7280;
  margin-top: 0.5rem;
  text-align: right;
}

.maintenance-details {
  text-align: left;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: #374151;
  font-size: 0.9rem;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  svg {
    font-size: 1.125rem;
    flex-shrink: 0;
    color: #8b5cf6;
  }
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

:deep(.t-button) {
  border-radius: 12px;
  height: 3rem;
  padding: 0 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

:deep(.t-button--theme-primary) {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
}

:deep(.t-button--theme-primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.4);
}

:deep(.t-button--variant-outline) {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

:deep(.t-button--variant-outline:hover) {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

:deep(.t-button--variant-text) {
  background: transparent;
  color: #6b7280;
}

:deep(.t-button--variant-text:hover) {
  background: rgba(107, 114, 128, 0.1);
  color: #374151;
}

:deep(.t-progress) {
  .t-progress__bar {
    border-radius: 6px;
    height: 8px;
  }
  
  .t-progress__inner {
    border-radius: 6px;
    transition: all 0.5s ease;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: 640px) {
  .error-content {
    padding: 2rem 1.5rem;
  }
  
  .error-code-maintenance {
    font-size: 3rem;
  }
  
  .maintenance-info {
    padding: 1.5rem;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
    
    :deep(.t-button) {
      min-width: 200px;
    }
  }
}
</style> 